  <!-- 文章列表开始 -->
  <el-col th:fragment="posts">

    <script th:inline="javascript">
      
      let posts = [[${posts}]]

      // 文章总数
      let total = [[${posts.total}]]
      let currentPage = [[${posts.page}]]
      let pageSize = [[${posts.size}]]
      pageData = {total, pageSize, currentPage, ...pageData}
      pageMethods = {
        //  上一页
        prev(){
          window.location.href = posts.prevUrl
        },
        // 下一页
        next(){
          window.location.href = posts.nextUrl
        },
        // 点击页码跳转页面
        change(e){
          window.location.href = '/page/' + e
        },
        ...pageMethods,
      }
      console.log('posts', posts)
    </script>

    <!-- 文章条开始 -->
    <el-card class="post-card" th:each="post : ${posts}">
   
    <template #header>
  
    <div class="card-header">
    <section class="text-hidden" th:with="cates = ${post.categories}">
      <span th:each="cate, state : ${cates}" >
      【<span th:text="${cate.spec.displayName}"></span>】
      </span>
    </section>
    <section>
      <i class="bi bi-eye"></i><span th:text="${post.stats.visit}"></span> · 
      <i class="bi bi-file-text"></i><span th:text="${post.stats.comment}"></span> ·  
      <i class="bi bi-hand-thumbs-up"></i><span th:text="${post.stats.upvote}"></span>
    </section>
    </div>
  
    </template> 
    <a th:href="@{${post.status.permalink}}" >
      <p class="title" th:text="${post.spec.title}"></p>
      <p class="excerpt" th:text="${post.status.excerpt}"></p>
    </a>
    
    <section class="card-footer">  
    <section >
    <i class="bi bi-person-circle"></i><span th:text="${post.owner.displayName}"></span> 
   
    </section>
    <section><i class="bi bi-clock"></i> <span th:text="${#dates.format(post.metadata.creationTimestamp,'yyy-MM-dd HH:mm')}"></span></section>
    </section>
    </el-card>
    <!-- 文章条结束 -->

    
    <el-pagination background 
    @prev-click="prev"
    @next-click="next"
    @current-change="change"
    :default-current-page="currentPage"
    layout="prev, pager, next" :page-size="pageSize" :total="total">
    </el-pagination>
    </el-col>
    <!-- 文章列表结束 --> 